import React, { Component } from 'react';
import { View, FlatList } from "react-native";
import { GLOBAL } from '../../../../config/global';
import { orderStyle } from '../_common/style';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import OrderDetailsService from '../_common/service';
import { TopShowCpt } from '../_components/TopShowCpt';
import { PayItemCpt } from '../_components/PayItemCpt';
import { CURRENCY } from '../../../../utils/helper';
import MethodUtil from '../../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;

export class OrderInvoiceComponent extends Component {

	constructor(props) {
		super(props);
		console.log('结算页面参数', props)
		let { orderType, orderId, tCode } = this.props.data || {};
		this.propsSend = { orderType, orderId, tCode };
		this.state = {
			status: 'loading',
			jsData: null,
		}
		this.sendData = {
			pageNo: 1,
			pageSize: 20,
			totalPage: 0,
		}
	}

	async	componentWillMount () {
		this._init();
	}

	componentWillUnmount () {

	}

	//初始化
	_init = () => {
		this._getData();
	}

	//获取数据列表
	_getData = async () => {
		let responseData = await OrderDetailsService.jsList({ orderId: this.propsSend.orderId });
		console.log('结算列表数据', responseData)
		if (responseData) {
			this.setState({ jsData: responseData, status: 'empty' })
		} else {
			this.setState({ status: 'empty' })
		}
		//this.sendData.totalPage = responseData.totalPage;
	}

	// 一条数据模版
	_renderPayItemView = (customer) => {
		return (
			<PayItemCpt type={'JS'} data={{ itemData: customer.item || {}, flagData: { orderType: this.propsSend.orderType, orderId: this.propsSend.orderId } }} />
		)
	}

	// 下拉更新函数
	_onEndPayReached = () => {
		console.log('123')
		if (this.sendData.pageNo < this.sendData.totalPage) {
			this.sendData.pageNo++;
			this._getData();
		}
	}

	render () {

		let { status, jsData } = this.state;
		let { appSettleHeadTOList, currency, totQuantityForSettle, totSettledQuantity, totSettleQuantityDiff, totAmountForSettle, totSettledAmount, totSettleAmountDiff } = jsData || {};
		console.log('结算-page', jsData)
		return (
			<View style={orderStyle.container}>
				<View style={orderStyle.scollBox}>
					<View style={orderStyle.showBox}>
						<TopShowCpt data={{
							imgData: { big: totAmountForSettle, small: totSettledAmount },
							leftNone: true,
							listData: [
								{ title: '应结量 / 金额', value: `${totQuantityForSettle != null ? MethodUtil.toThousands(totQuantityForSettle) : '-'}${totQuantityForSettle >= 0 ? '吨' : ''} / ${totAmountForSettle >= 0 ? MethodUtil.toThousands(totAmountForSettle) : '-'}${totAmountForSettle >= 0 ? CURRENCY.getUnit(currency).text : ''}` },
								{ title: '实结量 / 金额', value: `${totSettledQuantity != null ? MethodUtil.toThousands(totSettledQuantity) : '-'}${totSettledQuantity >= 0 ? '吨' : ''} / ${totSettledAmount >= 0 ? MethodUtil.toThousands(totSettledAmount) : '-'}${totSettledAmount >= 0 ? CURRENCY.getUnit(currency).text : ''}` },
								{ title: '待实结 / 金额', value: `${totSettleQuantityDiff != null ? MethodUtil.toThousands(totSettleQuantityDiff) : '-'}${totSettleQuantityDiff >= 0 ? '吨' : ''} / ${totSettleAmountDiff >= 0 ? MethodUtil.toThousands(totSettleAmountDiff) : '-'}${totSettleAmountDiff >= 0 ? CURRENCY.getUnit(currency).text : ''}`, color: true }
							],
							active: true
						}} />
					</View>
					<View style={{ flex: 1 }}>
						{appSettleHeadTOList ? (
							<View>
								<FlatList
									data={appSettleHeadTOList}
									extraData={this.state}
									renderItem={this._renderPayItemView.bind(this)}
									onEndReachedThreshold={0.5}
									onEndReached={this._onEndPayReached}
								/>
							</View>
						) : <PageStatusIndex status={status} emptyText={'暂无数据'} />}
					</View>
				</View>
			</View >
		)
	}
}